﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<!-- demo root element -->
<div id="app">
    <div class="box box-primary">
        <div class="box-header">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/Report/PurchaseSaleInventorySummary"><i class="fa fa-dashboard"></i> 进销存报表</a></li>
            </ol>
        </div>
        <div class="box-body">

            <div class="row" style="margin-bottom:10px;" slot="customSearch">
                @*<div class="col-xs-3 col-sm-2">
                        <input class="form-control" v-model="table.args.productCodeOrBarCode" placeholder="商品编码/条码" debounce="500" />
                    </div>

                    <div class="col-xs-3 col-sm-2">
                        <input class="form-control" v-model="table.args.productName" placeholder="商品名" debounce="500" />
                    </div>*@
                <div class="col-xs-3 col-sm-2">
                    <product-selector v-model="table.args.productCodeOrBarCode" placeholder="商品" ref="producttable"></product-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <brand-selector v-model="checkBrandIds" placeholder="品牌"></brand-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <category-selector v-model="table.args.categoryId" placeholder="品类"></category-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <store-selector v-model="table.args.StoreId" placeholder="门店"></store-selector>
                </div>

                @*<div class="col-xs-3 col-sm-2">
                        <supplier-selector v-model="table.args.supplierId" placeholder="供应商" ref="suppliertable"></supplier-selector>
                    </div>*@


            </div>

            <div class="row" style="margin-bottom:10px;" slot="customSearch">
                <div class="col-xs-3 col-sm-4">
                    <div class="input-group">
                        <span class="input-group-addon">选择时间</span>
                        <el-date-picker v-model="table.args.time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>

                <div class="form-group col-sm-2 col-xs-3" style="margin-left:200px">
                    <div class="input-group">
                        <el-checkbox v-model="table.args.checkedQuantity">不为0</el-checkbox>
                    </div>
                </div>
            </div>


            <el-row class="row-bottom">
                <el-col v-bind:sm="12" v-bind:md="12">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary btn-flat" v-on:click="loadData(true)">查 询</button>

                        <button type="button" class="btn btn-warning btn-flat" v-on:click="exportExecl()">导 出</button>
                    </span>
                </el-col>
            </el-row>

            <el-row>
                <el-col v-bind:span="24">
                    <el-table class="form-group" ref="$table" v-bind:data="table.rows" border style="width: 100%" summary-method="getSummaries" show-summary v-bind:height="table.height">

                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="StartDate" label="开始日期" width="95"></el-table-column>
                        <el-table-column prop="EndDate" label="结束日期" width="95"></el-table-column>
                        <el-table-column prop="CategoryName" label="类别" width="150"></el-table-column>
                        <el-table-column prop="BrandName" label="品牌" width="100"></el-table-column>
                        @*<el-table-column prop="SupplierName" label="供应商" width="150"></el-table-column>*@
                        <el-table-column prop="ProductCode" label="商品编码" width="120"></el-table-column>
                        <el-table-column prop="ProductName" label="商品名称" width="250"></el-table-column>
                        <el-table-column prop="FirstQuantity" label="期初数" width="120" sortable></el-table-column>
                        <el-table-column prop="PurchaseQuantity" label="本期采购数" width="120" sortable></el-table-column>
                        <el-table-column prop="PurchaseAmount" label="本期采购金额" width="150" sortable></el-table-column>
                        <el-table-column prop="SaleQuantity" label="本期销售数" width="120" sortable></el-table-column>
                        <el-table-column prop="SaleAmount" label="本期销售金额" width="150" sortable></el-table-column>
                        <el-table-column prop="SaleAmountAfterPreferential" label="本期销售金额(券后)" width="167" sortable></el-table-column>
                        <el-table-column prop="GiftsQuantity" label="本期赠送数" width="120" sortable></el-table-column>
                        <el-table-column prop="GiftsAmount" label="本期赠送金额" width="150" sortable></el-table-column>
                        <el-table-column prop="LastQuantity" label="期末数" width="120" sortable></el-table-column>
                        <el-table-column prop="Rate" label="周转率%" width="100"></el-table-column>
                    </el-table>
                    <el-pagination v-bind:current-page="table.page.pageIndex" v-bind:page-size="table.page.pageSize" v-bind:total="table.page.total"
                                   layout="total,sizes,prev,pager,next,jumper"
                                   v-on:size-change="onPageSizeChange" v-on:current-change="onPageChange" background>

                    </el-pagination>
                </el-col>
            </el-row>

        </div>
        <!-- /.box-body -->
    </div>
    <div class="clearfix"></div>

</div>

@section scripts{
    <script src="~/Content/vue/plugins/brand-selector/brand-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/category-selector/category-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/store-selector/store-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/supplier-selector/supplier-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/product-selector/product-selector.js" type="text/javascript"></script>
    <script>

        var demo = new Vue({
            components: {
            },
            el: '#app',
            data: {

                table: {
                    height:450,
                    rows: [],
                    args: { productCodeOrBarCode: '', supplierId: '', productName: '', StoreId: '', brandId: '', time: '', categoryId: '', order: '', mark: '',},
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize, IsPaging:true },

                },
                checkBrandIds: [],
                checkedQuantity: false,
            },
            methods: {
                onPageChange: function (page) {
                    this.table.page.pageIndex = page;
                    this.loadData();
                },
                onPageSizeChange: function (pageSize) {
                    this.table.page.pageSize = pageSize;
                    this.loadData();
                },
                loadData: function (firstPage) {
                    var _self = this;

                    if (_self.table.args.time.toString() == '')
                    {
                        _self.$message({
                            message: "请选择时间！",
                            type: 'error'
                        });
                        return;
                    }
                    var times = _self.table.args.time;
                    if(firstPage)
                        _self.table.page.pageIndex = 1;
                    _self.table.args.brandId = _self.checkBrandIds.toString();
                    _self.table.args.categoryId = _self.table.args.categoryId.toString();
                    _self.table.args.StoreId = _self.table.args.StoreId.toString();
                    _self.table.args.SupperId = _self.table.args.supplierId.toString();
                    _self.table.args.time = _self.table.args.time.toString();
                    var url = "/Report/LoadPurchaseSaleInventorySummaryData";
                    var data = Object.assign({}, _self.table.page, _self.table.args);
                    $.get(url, data, function (result) {
                        if (result.success) {
                            _self.table.rows = result.data;
                            _self.table.page.total = result.total;
                        }
                        else {
                            _self.$message({
                                message: result.error,
                                type: 'error'
                            });
                        }
                    }, "Json");
                    _self.table.args.time = times;
                },

                exportExecl:function()
                {
                    var _self = this;

                    if (_self.table.args.time.toString() == '')
                    {
                        _self.$message({
                            message: "请选择时间！",
                            type: 'error'
                        });
                        return;
                    }


                    var data = Object.assign({}, _self.table.page, _self.table.args);

                    var str='';
                    for(var key in data){
                        if(!data[key]==''){//判断为空就不传
                            str= str+"&"+key+"="+data[key];
                        }

                    }
                    window.location.href = "/Report/PurchaseSaleInventorySummaryExecl?"+str;


                },
                clearQuery:function(){
                    window.location.href = "/Report/PurchaseSaleInventorySummary";
                },
                getSummaries(param) {
                                const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
            if (index === 1) {
            sums[index] = '合计';
        return;
        }
        if (index === 2 ) {
            sums[index] = '';
            return;
        }
        if (index === 3) {
            sums[index] = '';
            return;
        }
        if (index === 4) {
            sums[index] = '';
            return;
        }
        if (index === 5) {
            sums[index] = '';
            return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
            if (!isNaN(value)) {
                return prev + curr;
            } else {
                return prev;
            }
        }, 0);
        sums[index] ;
        } else {
            sums[index] = '';
        }

        });
        return sums;
        },
        },
        created: function () {
            setListPage(this.table, 301);
        },
        })


    </script>
}


